<template>
    <div class="console-page">
        <div class="tools forbid-select cursor-default">
            <el-button :icon="getIcon('refresh')" link confirm-title="确定清空监控数据?"
                class="tool-button-resize cursor-pointer" circle @click="reset" />
            <el-button :icon="getIcon('ChatDotRound')" link confirm-title="确定清空并打印监控数据日志?"
                class="tool-button-resize cursor-pointer" circle @click="resetAndLog" />
        </div>
        <el-row style="height: 100%;">
            <el-col class="left-col">
                <div style="width: 50px;height: 100%;font-size: var(--font-size);"
                    class="forbid-select monitor cursor-default">
                    <div :class="`vertical-text ${currentTag === 'index' ? 'select' : ''}`"
                        @click="currentTag = 'index'">
                        整<br>体<br>概<br>况
                    </div>
                    <div :class="`vertical-text ${currentTag === 'dataSource' ? 'select' : ''}`"
                        @click="currentTag = 'dataSource'">数<br>据<br>源</div>
                    <div :class="`vertical-text ${currentTag === 'sql' ? 'select' : ''}`" @click="currentTag = 'sql'">
                        SQL<br>监<br>控</div>
                    <div :class="`vertical-text ${currentTag === 'wallet' ? 'select' : ''}`"
                        @click="currentTag = 'wallet'">
                        SQL<br>防<br>火<br>墙
                    </div>
                    <div :class="`vertical-text ${currentTag === 'web' ? 'select' : ''}`" @click="currentTag = 'web'">
                        Web<br>应<br>用</div>
                    <div :class="`vertical-text ${currentTag === 'uri' ? 'select' : ''}`" @click="currentTag = 'uri'">
                        URI<br>监<br>控</div>
                    <div :class="`vertical-text ${currentTag === 'spring' ? 'select' : ''}`"
                        @click="currentTag = 'spring'">
                        应<br>用<br>监<br>控
                    </div>
                </div>
            </el-col>
            <el-col class="right-col">
                <transition name="animate__animated " enter-active-class="animate__fadeIn animate__fast"
                    leave-active-class="animate__fadeOut animate__faster" mode="out-in">
                    <keep-alive>
                        <component :is="currentView" />
                    </keep-alive>
                </transition>
            </el-col>
        </el-row>
    </div>
</template>
<script setup>
import { useElMessage, useRipple, useRequest } from "@usehook"
import { getIcon } from "@/utils/tools"

let currentTag = $ref("index")

const druidComponents = import.meta.glob('@/components/druid/*')

const components = Object.keys(druidComponents).reduce((pre, cur) => {
    pre[cur.match(/[^\/]+(?=\.vue$)/)[0]] = defineAsyncComponent(druidComponents[cur])
    return pre
}, {})

const currentView = computed(() => {
    return components[currentTag]
})

const reset = () => {
    useRequest({ url: "/dataSource/druid/reset-all.json" }).then(resp => {
        if (resp && resp.ResultCode === 1) {
            useElMessage("数据重置成功")
        } else {
            useElMessage.error("数据重置失败")
        }
    })
}

const resetAndLog = () => {
    useRequest({ url: "/dataSource/druid/log-and-reset.json" }).then(resp => {
        if (resp && resp.ResultCode === 1) {
            useElMessage("数据重置成功")
        } else {
            useElMessage.error("数据重置失败")
        }
    })
}

useRipple(".monitor .vertical-text")
</script>
<style scoped>
:deep(.vertical-text) {
    cursor: default;
    text-align: center;
    height: calc(14.27% - 13px);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #99a9bf;
    margin: 10px 0;
    border-radius: 10px;
    transition: background .2s ease-out;
    background: rgba(232, 232, 232, .5);
}

:deep(.select) {
    background: rgba(155, 155, 155, .5);
    transition: background .5s ease-out;
}

:deep(.tools) {
    position: absolute;
    right: 0;
    z-index: 2;
    bottom: 0;
    background: #efefef;
    padding: 7px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    cursor: default;
    min-width: 80px;
    display: flex;
    justify-content: space-around;
    height: calc(var(--font-size)* 1.2);
    align-items: center;
}

:deep(.el-scrollbar__bar.is-vertical) {
    width: 0 !important;
    height: 0 !important;
}

:deep(.left-col) {
    height: 100%;
    max-width: 60px;
    padding: 0 5px;
}

:deep(.right-col) {
    max-width: calc(100% - 60px);
    min-width: calc(100% - 60px);
    height: 100%;
}

:deep(.tool-button-resize) {
    width: fit-content !important;
    font-size: calc(var(--font-size) * 1.5) !important;
    font-family: var(--font-family);
    font-weight: var(--font-weight) !important;
}
</style>
